*{
    margin: 0;
    padding: 0;
}
.content{
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    min-width: 1200px;
    box-sizing: border-box;
    // 头部标签样式
    header{
        width: 100%;
        height: 40px;
        padding: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 20px;
        box-shadow: 0 0 5px 5px #ccc;
        // 头部标签左边样式
        .header-left{
            display: flex;
            .logo{
                display: block;
                width: 130px;
                background: url(../images/login_logo.png) no-repeat;
                height: 45px;
            }
            >span{
                font-size: 22px;
                font-family: MicrosoftYaHei-Bol;
                color: #4b4b4b;
            }
        }
        // 头部标签右边部分样式
        .header-right{
            >ul{
                width: 600px;
                display: flex;
                list-style: none;
                >li{
                    flex-grow: 1;
                    >a{
                        text-align: center;
                        display: block;
                        height: 22px;
                        color: #777;
                        &:hover {
                            text-decoration: none;
                          }
                    }
                    &:first-child{
                        width: 100px;
                        position: relative;
                        &::before{
                            position: absolute;
                            top: -5px;
                            left: -10px;
                            content: '';
                            display: block;
                            width: 40px;
                            height: 40px;
                            background: url(../images/icon_user.png) no-repeat;
                            background-size: 100%;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                        &::after{
                            position: absolute;
                            top: 10px;
                            right: 20px;
                            content: '';
                            display: block;
                            border: 5px solid #505050;
                            border-left: 5px solid transparent;
                            border-right: 5px solid transparent;
                            border-bottom: 5px solid transparent;
                        }
                    }
                }
                .division{
                    width: 1px;
                    height: 15px;
                    background: #d0d0d0;
                    margin-top: 5px;
                }
            }
        }
    }
    main{
        width: 100%;
        height: 88vh;
        display: flex;
        // 侧边栏样式
        aside{
            width: 200px;
            border-top-right-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 5px 5px #ccc;
            .nav{
                padding-top: 20px;
                .nav-link{
                    text-align: left;
                    padding: 8px 0 8px 70px;
                    color: #505050;
                    border-bottom: 1px solid #f3f3f3;
                }
                >a{
                    position: relative;
                    &::before{
                        content: '';
                        display: block;
                        width: 25px;
                        height: 25px;
                        position: absolute;
                        top: 5px;
                        left: 30px;
                        background: url(../images/system_icon.png);
                        background-position: 0 0;
                    }
                    &::after{
                        content: '';
                        display: block;
                        width: 10px;
                        height: 10px;
                        position: absolute;
                        top: 15px;
                        right: 30px;
                        background: url(../images/system_icon1.png);
                    }
                    &:nth-child(1){
                        &::before{
                            background-position: 0 0;
                        }
                    }
                    &:nth-child(2){
                        &::before{
                            background-position: 0 -70px;
                        }
                    }
                    &:nth-child(3){
                        &::before{
                            background-position: 0 -140px;
                        }
                    }
                    &:nth-child(5){
                        &::before{
                            background-position: 0 -276px;
                        }
                    }
                    &:nth-child(6){
                        &::before{
                            background-position: 0 -345px;
                        }
                    }
                    &:nth-child(7){
                        &::before{
                            background-position: 0 -417px;
                        }
                    }
                    &:nth-child(8){
                        &::before{
                            background-position: 0 -487px;
                        }
                    }
                    &:nth-child(9){
                        &::before{
                            background-position: 0 -561px;
                        }
                    }
                }
                .accordion{
                    button{
                        color: #b12424;
                        &::after{
                            content: '';
                            display: block;
                            width: 10px;
                            height: 10px;
                            position: absolute;
                            top: 15px;
                            right: 30px;
                            background: url(../images/system_icon1.png);
                            transform: rotateZ(90deg);
                            transition: all 0.3s linear;
                        }
                    }
                    a{
                        color: #b12424;
                        &::before{
                            content: '';
                            display: block;
                            width: 25px;
                            height: 25px;
                            position: absolute;
                            top: 5px;
                            left: 30px;
                            background: url(../images/system_icon.png);
                            background-position: 0 -206px;
                        }
                        
                    }
                    
                }
                .card{
                    border: none;
                    .card-header {
                        padding: 0;
                        background: #fff;
                        border: none;
                        .btn{
                            font-size: 16px;
                            text-decoration: none;
                            .focus{
                                box-shadow: none;
                            }
                            &:focus{
                                box-shadow: none;
                            }
                            &:hover{
                                text-decoration: none;
                            }
                        }
                        .btn-link{
                            text-align: left;
                            padding: 0;
                        }
                        .collapsed{
                            &::after{
                                content: '';
                                display: block;
                                width: 10px;
                                height: 10px;
                                position: absolute;
                                top: 15px;
                                right: 30px;
                                background: url(../images/system_icon1.png);
                                transform: rotateZ(0);
                            }
                            
                            
                        }
                    }
                    .card-body{
                        padding: 0;
                        margin-left: 50px;
                        .nav{
                            padding-top: 0;
                            >a{
                                font-size: 14px;
                            }
                        }
                        .sub-link{
                            margin-right: 0;
                            border-bottom: none;
                            &:hover{
                                border-right: 1px solid red;
                                background: linear-gradient(to left,#bc0108 0,#bc0108 3px,rgba(228, 189, 189, 0.5) 3px,rgba(248, 244, 244, 0) 80px);
                            }
                            &::before{
                                content: none;
                            }
                            &::after{
                                content: none;
                            }
                        }
                    }
                }
                
            }
        }
        section{
            position: relative;
            overflow-y: scroll;
            margin-left: 20px;
            border-top-left-radius: 5px;
            flex-grow: 1;
            box-shadow: 0 0 5px 5px #ccc;
            .section-title{
                margin: 0;
            }
            .card{
                .card-body{
                    border-top: 3px solid #bc0108;
                    padding: 10px 30px;
                    box-shadow: 0px 4px 9px 0px 
                        rgba(0, 0, 0, 0.24);
                    border-radius: 4px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    .card-title{
                        position: relative;
                        font-size: 16px;
                        width: 90%;
                        &::before{
                            content: '';
                            display: block;
                            position: absolute;
                            top: 0;
                            left: -10px;
                            width: 3px;
                            height: 20px;
                            background: #bc0108;
                        }
                        &::after{
                            content: '查看';
                            display: block;
                            position: absolute;
                            font-size: 10px;
                            top: 0;
                            right: -30px;
                            width: 30px;
                            line-height: 20px;
                            border-radius: 2px;
                            color: #fff;
                            padding: 0 5px;
                            height: 20px;
                            background: #bc0108;
                        }
                    }
                    >span{
                        position: relative;
                        font-size: 20px;
                        font-weight: 700;
                    }
                    .yuan{
                        &::before{
                            content: '￥';
                            display: block;
                            position: absolute;
                            top: 10px;
                            left: -10px;
                            font-weight: 500;
                            font-size: 12px;
                        }       
                    }
                    >em{
                        font-style: normal;
                        font-size: 10px;
                        position: relative;
                    }
                    .chart-up{
                        &::after{
                            content: '';
                            display: block;
                            position: absolute;
                            top: 0;
                            right: -20px;
                            width: 20px;
                            height: 20px;
                            background: url(../images/chart_up.png);
                            background-size: 100%;
                        }
                    }
                    .chart-down{
                        &::after{
                            content: '';
                            display: block;
                            position: absolute;
                            top: 0;
                            right: -20px;
                            width: 20px;
                            height: 20px;
                            background: url(../images/chart_down.png);
                            background-size: 100%;
                        }
                    }
                }
            }
        }
        .section{
            padding: 10px 20px;
            .coustom{
                position: relative;
                margin-top: 10px;
                padding: 10px;
                overflow: hidden;
                border-top: 3px solid #bc0108;
                box-shadow: 0 0 10px 0 #ccc;
                >h5{
                    font-size: 18px;
                }
                .des{
                    position: absolute;
                    top: 10px;
                    right: 20px;
                    width: 240px;
                    height: 10px;
                    display: flex;
                    font-size: 10px;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 20;
                    .division{
                        width: 1px; 
                        height: 10px;
                        background: #999;
                    }
                    >i{
                        position: relative;
                        display: block;
                        width: 30px;
                        font-style: normal;
                        font-size: 10px;
                        &::after{
                            position: absolute;
                            top: 5px;
                            right: -10px;
                            content: '';
                            display: block;
                            border: 3px solid #505050;
                            border-left: 3px solid transparent;
                            border-right: 3px solid transparent;
                            border-bottom: 3px solid transparent;
                        }
                    }
                }
            }
            .progress{
                height: 5px;
            }
            .bg-success{
                background: #86bc42 !important;
            }
            .small-box{
                position: relative;
                width: 340px;
                height: 180px;
                margin: 0 auto;
                margin-top: 10px;
                border-radius: 3px;
                box-shadow: 0 0 10px 0 #ccc;
                border-top: 3px solid #bc0108;
                padding: 0 10px;
                >p{
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    margin: 0;
                    padding: 0;
                    font-size: 12px;
                    z-index: 999;
                }
                .gender{
                    overflow: hidden;
                    font-size: 10px;
                    .left{
                        float: left;
                    }
                    .right{
                        float: right;
                    }
                }
                .bt-legend{
                    position: absolute;
                    top: 70px;
                    left: 10px;
                    width: 80px;
                    font-size: 12px;
                    height: 200px;
                    z-index: 999;
                    display: flex;
                    flex-direction: column;
                    >div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .circle{
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                    }
                    .c1{
                        background: #7cb5ec;
                    }
                    .c2{
                        background: #90ed7d;
                    }
                    .c3{
                        background: #c360ed;
                    }
                    .c4{
                        background: #ffff76;
                    }
                }
                #maimairenshu{
                    height: 200px;
                }
                #shishishuju{
                    height: 200px;
                }
            } 
            #xfrqfx{
                width: 340px;
                height: 180px;
                padding-top: 30px;
                .gender{
                    margin: 10px 0;
                }

            }
            #tiaoxingtu{
                margin-top: 15px;
            }
            .box-top{
                padding: 10px 50px;
            }
            .box{
                width: 98%;
                border-radius: 3px;
                box-shadow: 0 0 10px 0 #ccc;
                border-top: 3px solid #bc0108;
                margin: 10px auto;
                .col-form-label{
                    padding: 0;
                    padding-top: 5px;
                    color: #4b4b4b;
                    font-size: 14px;
                }
                .form-control{
                    height: 30px;
                }
                .box-right{
                    margin-right: 0px;
                }
                .bg-gray{
                    font-size: 12px;
                    padding: 0 10px;
                    background: #f1f1f1;
                }
                .time-division{
                    position: relative;
                    &::after{
                        position: absolute;
                        top: 10px;
                        right: 0;
                        content: '';
                        display: block;
                        width: 40px;
                        height: 3px;
                        background: #bdbdbd;
                    }
                }
                button{
                    border: none;
                    width: 100px;
                    height: 30px;
                    border-radius: 5px;
                    margin: 0 5px;
                    color: #4b4b4b;
                }
                .wrap{
                    width: 300px;
                    margin: 0 auto;
                    .red-white{
                        background: red;
                        color: #fff;
                        font-size: 14px;
                    }
                }
                .nav{
                    margin: 0 30px;
                    .nav-division{
                        margin-top: 10px;
                        width: 1px;
                        height: 15px;
                        background: #e1e1e1;
                    }
                    >a{
                        font-size: 12px;
                        color: #636363;
                    }
                }
                .table{
                    >table{
                        text-align: center;
                        width: 100%;
                        height: 200px;
                        >thead{
                            font-size: 12px;
                            color: #bc0108;
                            background: #f5d9da;
                        }
                    }
                }
                .table-footer{
                    padding-left: 30px;
                    display: flex;
                    .form-check{
                        font-size: 12px;
                    }
                    >button{
                        height: 20px;
                        font-size: 12px;
                    }
                } 
            }
            // 添加列表
            .addprofile{
                padding: 10px;
                display: flex;
                .add-division{
                    width: 1px;
                    height: 100%;
                    background: #cacaca;
                }
                .form-control{
                    height: 20px;
                }
                .flex{
                    display: flex;
                    >p{
                        font-weight: 700;
                        margin-right: 185px;
                    }
                    .profileclass{
                        position: absolute;
                        top: 100px;
                        right: 100px;
                    }
                    
                    .parameter{
                        position: absolute;
                        top: 180px;
                        right: 100px;
                    }
                }
                .parameter-mt{
                    margin-top: 60px;
                }
                .profile-btn{
                    width: 80px;
                    height: 25px;
                    color: #fff;
                    font-size: 12px;
                    background: #bc0108;
                }
                .btn-pic{
                    width: 60px;
                    height: 20px;
                }
                .btn-video{
                    width: 60px;
                    height: 20px;
                    font-size: 12px;
                }
                .addpic{
                    text-align: center;
                    line-height: 400px;
                    width: 400px;
                    height: 400px;
                    border: 1px dotted #ccc;
                    margin: 20px auto;
                }
                .pic-right{
                    float: right;
                }
                .btn-save{
                    width: 60px;
                    height: 20px;
                }
                .btn-cancel{
                    font-size: 12px;
                    width: 60px;
                    height: 20px;
                }
            }
            // 产品列表
            .profilelist-title{
                padding: 10px;
                >label{
                    margin-left: 5px;
                    font-size: 14px;
                }
                button{
                    margin-left: 5px;
                    width: 80px;
                    height: 30px;
                    border: none;
                    color: #fff;
                    background: #bc0108;
                    font-size: 12px;
                    border-radius: 5px;
                }
                .btn-select{
                    width: 60px;
                    height: 25px;
                }
                .profilename-inp{
                    height: 20px;
                    width: 100px;
                }
            }
            .profilelist{
                >table{
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    >thead{
                        >tr{
                            height: 40px;
                            background: #f8e8e8;
                            >td{
                                margin: 10px;
                                
                            }
                        }
                    }
                    >tbody{
                        >tr{
                            &:nth-child(odd){
                                background: #f6f6f6;
                            }
                            >td{
                                height: 50px;
                                .btn-group{
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    .btn-des{
                                        width: 30px;
                                        height: 20px;
                                    }
                                    .btn-revise{
                                        width: 30px;
                                        height: 20px;
                                    }
                                    .btn-delete{
                                        width: 30px;
                                        height: 20px;
                                    }
                                    .btn-division{
                                        width: 1px;
                                        height: 10px;
                                        background: #828282;
                                    }
                                }
                                
                            }
                        }
                    }
                }
            }
            .pages{
                position: absolute;
                right: 30px;
                bottom: 20px;
                display: flex;
                .pagination{
                    width: 180px;
                    display: flex;
                    justify-content: space-around;
                    margin-right: 10px;
                    .page-item{
                        display: block;
                        text-align: center;
                        height: 20px;
                        .page{
                            width: 10px;
                            padding: 0;
                            text-align: center;
                        }
                    }
                }
                >span{
                    font-size: 12px;
                    .pagenumber{
                        width: 20px;
                        height: 20px;
                        margin: 0 5px;
                        outline: none;
                    }
                }
            }
        }
    }
}